<template>
  <!-- 拼多多转盘 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="拼多多转盘" width="72%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :activity_type="9" :data="data"/>
      <el-form ref="activityForm" :model="formParameter" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in activityData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <!-- 初始金额 -->
            <div class="item-clear flex" v-show="item.key=='init_cash'">
              <el-form-item label="Min:" label-width="50px" prop="init_cash_min">
                <el-input-number :min="0" :max="999999999"  v-model="formParameter.init_cash_min" controls-position="right" clearable placeholder="请输入初始金额Min" />
              </el-form-item>
              <el-form-item label="Max:" label-width="50px" prop="init_cash_max">
                <el-input-number :min="0" :max="999999999"  v-model="formParameter.init_cash_max" controls-position="right" clearable placeholder="请输入初始金额Max" />
              </el-form-item>
            </div>
            <!-- 最大提现额度 -->
            <el-form-item class="item-clear" v-show="item.key=='withdrawable'" label="" label-width="" prop="withdrawable">
              <el-input-number :min="0" :max="999999999999"  v-model="formParameter.withdrawable" controls-position="right" clearable placeholder="请输入最大提现额度"/>
            </el-form-item>
            <!-- web拼多多地址 -->
            <el-form-item class="item-clear" v-show="item.key=='web_link'" label="" label-width="" prop="web_link">
              <el-input class="width90" type="text" v-model="formParameter.web_link" clearable placeholder="请输入web拼多多地址"/>
            </el-form-item>
            <!-- 进入大厅赠送次数（新注册） -->
            <el-form-item class="item-clear" v-show="item.key=='free_count'" label="" label-width="" prop="free_count">
              <el-input-number :min="0" :max="999999999999"  v-model="formParameter.free_count" controls-position="right" clearable placeholder="请输入进入大厅赠送次数（新注册）"/>
            </el-form-item>
            <!-- 已经送出去的钱 -->
            <el-form-item class="item-clear" v-show="item.key=='num_of_withdraw_count'" label="" label-width="" prop="num_of_withdraw_count">
              <el-input-number :min="0" :max="999999999999"  v-model="formParameter.num_of_withdraw_count" controls-position="right" clearable placeholder="请输入已经送出金额初始值"/>
            </el-form-item>
            <!-- 有多少人领取了 -->
            <el-form-item class="item-clear" v-show="item.key=='num_of_receive_count'" label="" label-width="" prop="num_of_receive_count">
              <el-input-number :min="0" :max="999999999999"  v-model="formParameter.num_of_receive_count" controls-position="right" clearable placeholder="请输入已领取次数初始值" />
            </el-form-item>
            <!-- 老用户注册时间 -->
            <el-form-item class="item-clear" v-show="item.key=='old_user_start_time'" label="" label-width="" prop="old_user_start_time">
              <el-date-picker  is-range v-model="formParameter.old_user_start_time" type="date" 
              class="full-width-input time-box width240" :clearable="false" :default-time="['00:00:00']"></el-date-picker>
            </el-form-item>
            <!-- 奖励 -->
            <div class="item-clear" v-show="item.key=='rewards'" style="height:auto;">
              <div class="marginTB10 flex" v-for="(second,two) in rewardData" :key="two">
                <el-form-item label="位置:" label-width="50px">
                  <el-input-number class="width90px" :min="1" :max="10" disabled :precision="0" :controls="false" v-model="second.position" controls-position="right" clearable placeholder="请输入位置"/>
                </el-form-item>
                <el-form-item label="道具:" label-width="50px">
                  <el-select class="width150" v-model="second.item_id" placeholder="请选择道具类型" filterable>
                    <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="Min:" label-width="50px">
                  <el-input-number class="width120" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.award_min" controls-position="right" clearable placeholder="请输入奖励"/>
                </el-form-item>
                <el-form-item label="Max:" label-width="50px">
                  <el-input-number class="width120" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.award_max" controls-position="right" clearable placeholder="请输入奖励"/>
                </el-form-item>
                <el-form-item label="多语言:" label-width="70px">
                  <el-input-number class="width90px" :min="1" :max="999999999999" :precision="0" :controls="false" v-model="second.language_id" controls-position="right" clearable placeholder="请输入多语言ID"/>
                </el-form-item>
                <el-form-item label="权重:" label-width="50px">
                  <el-input-number class="width90px" :min="0" :max="10000" :precision="0" v-model="second.weight" :controls="false" controls-position="right" clearable placeholder="请输入权重"/>
                </el-form-item>
              </div>
            </div>
            <!-- 规则配置 -->
            <div class="item-clear" v-show="item.key=='rule'" style="height:auto;">
              <div class="marginTB10 flex border-item" v-for="(second,two) in ruleData" :key="two">
                <div class="btn-box-add" style="margin-top:0;">
                  <el-tooltip content="新增规则配置" v-show="ruleIndex==two">
                    <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addReward(two)" />
                  </el-tooltip>
                </div>
                <div>
                  <div class="title flex">
                    <span class="width25">阶段【<span style="color:red;">{{two+1}}</span>】转动次数</span>
                    <el-form-item class="item-clear" label="Min:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="9999999999" :precision="0" v-model="second.invites_min" controls-position="right" clearable placeholder="请输入阶段需要次数Min"/>
                    </el-form-item>
                    <el-form-item class="item-clear" label="Max:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="9999999999" :precision="0" v-model="second.invites_max" controls-position="right" clearable placeholder="请输入阶段需要次数Max"/>
                    </el-form-item>
                  </div>
                  <div class="title flex">
                    <span class="width25">每次增加Min万分比</span>
                    <el-form-item class="item-clear" label="Min:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="10000" :precision="0" v-model="second.inc_min" controls-position="right" clearable placeholder="请输入阶段需要次数Min"/>
                    </el-form-item>
                    <el-form-item class="item-clear" label="Max:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="10000" :precision="0" v-model="second.inc_max" controls-position="right" clearable placeholder="请输入阶段需要次数Max"/>
                    </el-form-item>
                  </div>
                  <div class="title flex">
                    <span class="width25">触发大奖的万分比</span>
                    <el-form-item class="item-clear" label="万分比:" label-width="90px">
                      <el-input-number class="width180" :min="0" :max="10000" :precision="0" v-model="second.trigger_max_award" controls-position="right" clearable placeholder="请输入阶段需要次数Min"/>
                    </el-form-item>
                    <el-form-item class="item-clear" label="触发次数:" label-width="90px">
                      <el-input-number class="width180" :min="0" :max="999999999" :precision="0" v-model="second.trigger_max_invited" controls-position="right" clearable placeholder="请输入阶段需要次数Min"/>
                    </el-form-item>
                  </div>
                  <div class="title flex">
                    <span class="width25">触发大奖后需要次数</span>
                    <el-form-item class="item-clear" label="Min:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="9999999999" :precision="0" v-model="second.user_min" controls-position="right" clearable placeholder="请输入阶段需要次数Min"/>
                    </el-form-item>
                    <el-form-item class="item-clear" label="Max:" label-width="50px">
                      <el-input-number class="width180" :min="0" :max="9999999999" :precision="0" v-model="second.user_max" controls-position="right" clearable placeholder="请输入阶段需要次数Max"/>
                    </el-form-item>
                  </div>
                </div>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除规则配置" v-show="ruleData.length != 1">
                    <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteReward(two)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";

import PageDetails from '../page-details.vue'
export default {
  components: {
    PageDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      activityData:[
        { label: '初始值金额', key: 'init_cash',pass:true },
        { label: '最大提现额度', key: 'withdrawable',pass:true },
        { label: 'web拼多多地址', key: 'web_link',pass:true },
        { label: '进入大厅赠送次数（新注册）', key: 'free_count',},
        { label: '已经送出金额初始值', key: 'num_of_withdraw_count',pass:true },
        { label: '已经领取次数初始值', key: 'num_of_receive_count',pass:true },
        { label: '老用户注册时间', key: 'old_user_start_time'},
        { label: '奖励配置', key: 'rewards',pass:true },
        { label: '规则配置', key: 'rule',pass:true },
      ],
      formParameter:{
        withdrawable:0,
        free_count:0,
        web_link:'',
        init_cash_min:0,
        init_cash_max:0,
        num_of_withdraw_count:0,
        num_of_receive_count:0,
        old_user_start_time:'',
        award_conf:[],
        award_items:[],
      },
      formParams: {},
      rewardData:[
        {position:1,item_id:1,award_min:0,award_max:0,language_id:1,weight:1},
        {position:2,item_id:2,award_min:0,award_max:0,language_id:1,weight:1},
        {position:3,item_id:3,award_min:0,award_max:0,language_id:1,weight:1},
        {position:4,item_id:4,award_min:0,award_max:0,language_id:1,weight:1},
        {position:5,item_id:5,award_min:0,award_max:0,language_id:1,weight:1},
        {position:6,item_id:6,award_min:0,award_max:0,language_id:1,weight:1},
        {position:7,item_id:7,award_min:0,award_max:0,language_id:1,weight:1},
        {position:8,item_id:8,award_min:0,award_max:0,language_id:1,weight:1},
      ],
      ruleData:[
        {stage:1,invites_min:0,invites_max:0,inc_min:0,inc_max:0,trigger_max_award:0,trigger_max_invited:0,user_min:0,user_max:0},
      ],
      ruleIndex:0,
      ruleForm: {
        withdrawable: [{ required: true, trigger: 'blur', message: '请输入最大提现额度', }],
        free_count: [{ required: true, trigger: 'blur', message: '请输入进入大厅赠送次数（新注册）', }],
        num_of_withdraw_count: [{ required: true, trigger: 'blur', message: '请输入已经送出金额初始值', }],
        num_of_receive_count: [{ required: true, trigger: 'blur', message: '请输入已经领取次数初始值', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data));
        if(that.formParams.other){
          that.formParameter = that.formParams.parameter
          // 时间
          if(that.formParameter.old_user_start_at){
            that.formParameter.old_user_start_time=that.$public.timestampTime(that.formParameter.old_user_start_at*1000)
          }
          // 规则
          that.ruleData = JSON.parse(that.formParams.other).award_conf
          that.ruleIndex = that.ruleData.length-1
          // 奖励
          that.rewardData = that.arrDivideWan(JSON.parse(that.formParams.other).award_items) 
        }else{
          that.formParameter = {
            withdrawable:0,
            free_count:0,
            web_link:'',
            init_cash_min:0,
            init_cash_max:0,
            num_of_withdraw_count:0,
            num_of_receive_count:0,
            old_user_start_time:'',
            award_conf:[],
            award_items:[],
          }
        }
      } else {
        that.formParameter = {
          withdrawable:0,
          free_count:0,
          web_link:'',
          init_cash_min:0,
          init_cash_max:0,
          num_of_withdraw_count:0,
          num_of_receive_count:0,
          old_user_start_time:'',
          award_conf:[],
          award_items:[],
        }
        that.rewardData=[
          {position:1,item_id:1,award_min:0,award_max:0,language_id:1,weight:1},
          {position:2,item_id:2,award_min:0,award_max:0,language_id:1,weight:1},
          {position:3,item_id:3,award_min:0,award_max:0,language_id:1,weight:1},
          {position:4,item_id:4,award_min:0,award_max:0,language_id:1,weight:1},
          {position:5,item_id:5,award_min:0,award_max:0,language_id:1,weight:1},
          {position:6,item_id:6,award_min:0,award_max:0,language_id:1,weight:1},
          {position:7,item_id:7,award_min:0,award_max:0,language_id:1,weight:1},
          {position:8,item_id:8,award_min:0,award_max:0,language_id:1,weight:1},
        ]
        that.ruleData=[
          {stage:1,invites_min:0,invites_max:0,inc_min:0,inc_max:0,trigger_max_award:0,trigger_max_invited:0,user_min:0,user_max:0},
        ]
        that.ruleIndex=0
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this,parameter = JSON.parse(JSON.stringify(that.formParameter)),
      params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm()));
      for (const key in parameter) {
        if(key=='withdrawable' && key=='init_cash_min' && key=='init_cash_max' && key=='num_of_withdraw_count' && key=='num_of_receive_count'){
          parameter[key]=that.$public.mathNumberMultiply(parameter[key],10000)
        }
      }
      parameter.other={}
      params.activity_type=18
      // 最大提现额度
      if(!parameter.withdrawable){
        return that.$message.error('请输入最大提现额度')
      }
      // 大厅赠送次数
      if(!parameter.free_count){
        return that.$message.error('请输入进入大厅赠送次数（新注册）')
      }
      // 大厅赠送次数
      if(!parameter.web_link){
        return that.$message.error('请输入web拼多多地址')
      }
      // 初始金额
      if(!parameter.init_cash_max){
        return that.$message.error('请输入正确的初始金额区间')
      }
      // 已经送出金额初始值
      if(!parameter.num_of_withdraw_count){
        return that.$message.error('请输入已经送出金额初始值')
      }
      // 已经领取次数初始值
      if(!parameter.num_of_receive_count){
        return that.$message.error('请输入已经领取次数初始值')
      }
      // 限时活动--老用户注册时间必传
      if(params.time_type==2){
        if(!parameter.old_user_start_time){
          return that.$message.error('请选择正确的老用户注册时间')
        }
      }
      if(parameter.old_user_start_time){
        parameter.old_user_start_at=new Date(parameter.old_user_start_time).getTime()/1000
      }
      // 奖励配置
      parameter.award_items=that.arrNumWan(JSON.parse(JSON.stringify(that.rewardData)))
      // 规则配置
      that.ruleData.map((item,index)=>{
        item.stage=index+1
      })
      parameter.award_conf=that.ruleData
      params.other=JSON.stringify(parameter)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if(params.id){
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }else{
            addActivity(params).then((res)=> {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增规则配置
    addReward () {
      this.ruleIndex++
      this.ruleData.push({stage:0,invites_min:0,invites_max:0,inc_min:0,inc_max:0,trigger_max_award:0,trigger_max_invited:0,user_min:0,user_max:0
      })
    },
    // 删除规则配置
    deleteReward (index) {
      this.ruleIndex--
      this.ruleData.splice(index,1,)
    },
    // 奖励*10000
    arrNumWan(arr){
      arr.forEach(item=>{
        item.award_min=item.award_min*10000
        item.award_max=item.award_max*10000
      })
      return arr
    },
    // 奖励/10000
    arrDivideWan(arr){
      arr.forEach(item=>{
        item.award_min=this.$public.mathNumberDivideWan(item.award_min)
        item.award_max=this.$public.mathNumberDivideWan(item.award_max)
      })
      return arr
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item{
  margin-bottom: 5px;
}
.btn-box-add{
  width: 50px;
  text-align: center;
  margin-top: -20px;
  margin-left: -10px;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
